<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D</title>
		<style type="text/css">
			#layout{
				position: fixed;
				z-index: 10000;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			.container{
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 100;
				top: 0;
				left: 0;
				background-color: #000;
				overflow: hidden;
				transform-style: preserve-3d;
			}
			.trends_h,.container_inner{
				position: absolute;
				z-index: 10;
				top: 0;
				bottom: 0;
				right: 0;
				left: 0;
				margin: auto;
				width: 100%;
				height: 100%;
				transform-style: preserve-3d;
			}
			.container_inner{
				border: 1px solid #fff;
				transform-style: preserve-3d;
				perspective: 860px;
				transform-origin: center center;
				overflow: hidden;
			}
			.trends_h{
				transform-style: preserve-3d;
				animation: lines 70s linear infinite;
			}
			.trends_h .p{
				box-sizing: border-box;
				position: absolute;
				width: 640px;
				height: 4000px;
				z-index: 10;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				font-size: 20px;
				text-align: center;
				color: red;
				/* background-color: rgba(255,255,255,0.3); */
			}
			.img{
				display:block;
				border-radius:50px;
				overflow:hidden;
				/* border:2px solid transparent; */
				opacity:1;
				width: 640px;
				height: 400px;
				background-color: rgba(255,0,0,0.3);
				filter:grayscale(100%) blur(4px);
				overflow: hidden;
			}
			@keyframes lines{
				from{
					transform: rotateX(-90deg) rotateZ(0) translateZ(0);
				}
				to{
					transform: rotateX(-90deg) rotateZ(360deg) translateZ(0);
				}
			}
		</style>
	</head>
		<div id="layout">
			<canvas id="sixIcon"></canvas>
		</div>
		<div class="container">
			<div class="container_inner">
				<div class="trends_h tp1" id="cy">
					
				</div>
			</div>
		</div>
		<!-- <div class="panorama"></div> -->
		<script type="text/javascript">
			(function(){
				let html = "",
					length = "3053px",
					deg = 12;
				for(var i = 0; i< 30; i++){
					html+=`<div class="p" style="transform:rotateX(90deg) rotateY(${deg*i}deg) translateZ(${length});">
						${imgs()}
						<div style="font-size:36px;color:red;width:640px;400px">login</div>
					</div>`;
				}
				function imgs(){
					var images = "",
						is = ['a.webp','img/e.jpg','img/c.jpg','img/p.jpg','img/p1.jpg','img/p2.jpg','img/p3.jpg','img/p4.jpg','img/p5.jpg','img/p6.jpg','img/p7.jpg'];
					for(var i = 0; i < 15;i++){
						let p = Math.random()*10;
						p = Math.round(p);
						images+=`<image src="${is[p]}" class="img"/>`;
					}
					return images;
				}
				document.getElementById("cy").innerHTML = html;
				function sizeEvent(){
					let w=window.innerWidth
						|| document.documentElement.clientWidth
						|| document.body.clientWidth,
						h=window.innerHeight
						|| document.documentElement.clientHeight
						|| document.body.clientHeight;
					let t = document.getElementById("layout").style;
				}
				
				const convas = document.getElementById("sixIcon");
				var ctx=convas.getContext("2d");
				ctx.moveTo(0,0);
				ctx.lineTo(200,100);
				ctx.stroke();
			})()
		</script>
	</body>
</html>
